<template>
	<view class="page">
		<image class="header-bg" src="../../static/bg_04.png" mode="widthFix"></image>
		<block v-if="pets.length > 0">
		<view class="form-wrap">
			<view class="form-group form-group__picker">
				<view class="form-group__title require">办证爱宠</view>
				<view class="form-group__con" >
					<picker class="form-group__from" mode="selector" :range="pets" range-key="nickName" @change="pickerChange">
						<view class="sub-div">
							<view v-if="!formData.petId" class="picker-res placeholder-class">{{pickerRes}}</view>
							<view v-else class="picker-res">{{formData.petName}}</view>
							<u-icon name='arrow-right' size='20' color='#b2b2b2'></u-icon>
						</view>
					</picker>
				</view>
			</view>
			<view class="form-group form-group__upload">
				<view class="form-group__title">1、宠物主人身份证正反面</view>
				<view class="form-group__con">
					<view class="upload-item">
						<image class="upload-img" @click="uploadImg('masterIDCardImgA')" v-if="!formData.masterIDCardImgA" src="../../static/icon_03.png" mode=""></image>
						<image class="upload-img" @click="uploadImg('masterIDCardImgA')" v-else :src="formData.masterIDCardImgA" mode=""></image>
						
						<view class="upload-tip">身份证正面</view>
					</view>
					<view class="upload-item">
						<image class="upload-img" @click="uploadImg('masterIDCardImgB')" v-if="!formData.masterIDCardImgB" src="../../static/icon_03.png" mode=""></image>
						<image class="upload-img" @click="uploadImg('masterIDCardImgB')" v-else :src="formData.masterIDCardImgB" mode=""></image>
						<view class="upload-tip">身份证反面</view>
					</view>
				</view>
			</view>
			<view class="form-group form-group__upload">
				<view class="form-group__title">2、宠物正面和侧面照</view>
				<view class="form-group__con">
					<view class="upload-item">
						<image class="upload-img" @click="uploadImg('petImgA')" v-if="!formData.petImgA" src="../../static/icon_03.png" mode="widthFix"></image>
						<image class="upload-img" @click="uploadImg('petImgA')" v-else :src="formData.petImgA" mode="widthFix"></image>
						<view class="upload-tip">宠物正面照</view>
					</view>
					<view class="upload-item">
						<image class="upload-img" @click="uploadImg('petImgB')" v-if="!formData.petImgB" src="../../static/icon_03.png" mode="widthFix"></image>
						<image class="upload-img" @click="uploadImg('petImgB')" v-else :src="formData.petImgB" mode="widthFix"></image>
						<view class="upload-tip">宠物侧面照</view>
					</view>
				</view>
			</view>
			
			<view class="form-group form-group__upload bb">
				<view class="form-group__title">3、宠物主人和爱犬合照</view>
				<view class="form-group__con">
					<view class="upload-item">
						<image class="upload-img" @click="uploadImg('masterAndPetImg')" v-if="!formData.masterAndPetImg" src="../../static/icon_03.png" mode="widthFix"></image>
						<image class="upload-img" @click="uploadImg('masterAndPetImg')" v-else :src="formData.masterAndPetImg" mode="widthFix"></image>
						<view class="upload-tip">上传合照</view>
					</view>
				</view>
			</view>
			
		</view>
		<view class="tip">“注：在方舟动物医疗为宠物注射疫苗即可办理”</view>
		</block>
		
		<view   v-if="pets.length <= 0" class="empty">
			<u-empty mode='list' text='您还没有添加宠物,请先添加宠物~'></u-empty>
		</view>
		<view v-if="pets.length <= 0" class="circular-submit" @click="$link('/pagesMine/petsAdd')">去添加</view>
		
		<view class="btns" @click="$link('/pagesMain/success')">
			<view class="btn" @click="$link('/pagesMain/dogCard/guide')">查看办理指南</view>
			<view class="btn" @click="formSubmit">提交办证</view>
		</view>
		<view class="footer-block"></view>
		<view class="footer-block"></view>
	</view>
</template>

<script>
	import common from '../../utils/common.js'
	import api from '../../utils/api.js'
	export default {
		data() {
			return{
				common,
				pets: [],
				pickerRes: '点击选择',
				formData: {
					petId: '',
					petName: '',
					masterIDCardImgA: '', // 主人身份证正面
					masterIDCardImgB: '', // 主人身份证反面
					petImgA: '', // 宠物正面照片
					petImgB: '', // 宠物侧面照片
					masterAndPetImg: '', // 宠物和主人合照
				},
			}
		},
		
		onLoad() {
			this.getPetList()
		},
		
		methods: {
			getPetList() {
				api.getPetList({ },(res) => {
					 this.pets = res
				}) 
			},
			
			pickerChange(e) {
				let index = e.detail.value
				this.formData.petId = this.pets[index].id
				this.formData.petName = this.pets[index].nickName
			},
			
			uploadImg(field) {
				common.imgUpload(imgPath => {
					this.formData[field] = imgPath
				})
			},
			
			formSubmit() {
				let formData = this.formData
				if(!formData.petId) { this.$showToast('请选择需要办证的宠物~'); return }
				if(!formData.masterIDCardImgA) { this.$showToast('请上传主人身份证正面照~'); return }
				if(!formData.masterIDCardImgB) { this.$showToast('请上传主人身份证反面照~'); return }
				if(!formData.petImgA) { this.$showToast('请上传宠物正面照片~'); return }
				if(!formData.petImgB) { this.$showToast('请上传宠物侧面照片~'); return }
				if(!formData.masterAndPetImg) { this.$showToast('请上传宠物和主人合照~'); return }
				api.saveAccreditation(formData, res => {
					this.$link('/pagesMain/dogCard/success')
				})
			}
		}
		
	}
</script>

<style scoped lang="scss">
	.header-bg{
		width: 100%;
	}
	.o .op{
		flex-wrap: wrap;
		height: auto;
		padding: 20upx 0;
		border-radius: 10upx;
		width: 215upx;
	}
	.upload-img{
		margin-right: 10upx;
	}
	.o .op {
		margin-right: 0;
	}
	.limit{
		width: 100%;
		text-align: center;
		font-size: $font-size-24;
	}
	.form-group__upload .upload-img{
		width: 140upx;
	}
	.tip{
		font-size: $font-size-24;
		color: #ff3535;
		font-weight: bold;
		margin-top: 20upx;
	}
	.bb{
		border-bottom: 1px solid $border-color !important;
	}
	.btns{
		@include flex-base;
		position: fixed;
		width: 100%;
		height: 90upx;
		left: 0;
		bottom: 0;
		.btn:nth-of-type(1){
			width: 50%;
			background-color: $bg-dark-color;
			border-radius: 0;
			color: $theme-color;
			font-weight: bold;
			height: 90upx;
			line-height: 90upx;
			font-size: $font-size-26;
		}
		.btn:nth-of-type(2){
			width: 50%;
			background-color: $theme-color;
			border-radius: 0;
			color: #fff;
			font-weight: bold;
			height: 90upx;
			line-height: 90upx;
			font-size: $font-size-26;
		}
	}
</style>
